<template>
  <div class="app-container">
    <el-row :gutter="20" class="mb20">
      <el-col :span="6">
        <el-input v-model="req._code_" type="text" placeholder="请输入编码" @change="getList"></el-input>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
        <el-button type="success" icon="el-icon-plus" @click="add">新增</el-button>
        <!-- <el-button class="ml20" icon="el-icon-upload" @click="showImp = true">批量导入</el-button>
        <el-button class="ml20" icon="el-icon-download" @click="downloadTemp">下载模板</el-button> -->
      </el-col>
    </el-row>
    <el-table :data="list" border style="width: 100%">
      <el-table-column type="index" label="序号" width="60" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="name" label="设备名称" min-width="120" align="left" show-overflow-tooltip></el-table-column>
      <el-table-column prop="code" label="设备编码" min-width="120" align="left" show-overflow-tooltip></el-table-column>
      <el-table-column prop="address" label="设备地址" min-width="120" align="left" show-overflow-tooltip></el-table-column>
      <el-table-column prop="enabled" label="是否启用" min-width="120" align="left" show-overflow-tooltip>
        <template slot-scope="{ row }">
          <span>{{row.enabled == 1?'启用':'关闭'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" align="center">
        <template slot-scope="{ row }">
          <el-button @click="edit(row)" type="text" size="small">编辑</el-button>
          <el-button @click="del(row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination v-show="total" :total="total" :page.sync="req.page" :limit.sync="req.pageSize" @pagination="getList">
    </Pagination>

    <!-- 弹窗 -->
    <edit :show.sync="show" :item="current" @change="getList"></edit>
    <imp :show.sync="showImp" @change="getList"></imp>
  </div>
</template>

<script>
  import edit from './components/edit.vue';
  import imp from './components/imp.vue';
  import {
    cardList,
    cardDel
  } from '@/api/card';
  export default {
    components: {
      edit,
      imp
    },
    data() {
      return {
        show: false,
        showImp: false,
        current: null,
        list: [],
        total: 0,
        req: {
          _code_: null,
          _memberName_: null,
          _cardFirm_: null,
          page: 1,
          pageSize: 20
        }
      };
    },
    created() {
      this.getList();
    },
    methods: {
      // 获取列表
      getList() {
        cardList(this.req).then((res) => {
          this.list = res.data || [];
          this.total = res.total;
        });
      },
      // 下单模板
      downloadTemp() {
        // window.open(this.$store.state.setup.baseUrl + '/attendance-saas/card/template?appKey=' + this.$store.state.setup.appKey);
        this.download('/attendance-saas/card/template', {}, `工牌导入模板_${new Date().getTime()}.xlsx`, {
          method: 'GET'
        });
      },
      // 添加
      add() {
        this.current = {};
        this.show = true;
      },
      // 删除
      del(row) {
        this.$modal.confirm('确定删除此条数据吗？').then((res) => {
          // 请求服务器删除数据
          cardDel({
            id: row.id
          }).then((res) => {
            // 刷新数据
            this.getList();
          });
        });
      },
      // 修改
      edit(row) {
        this.current = JSON.parse(JSON.stringify(row));
        this.show = true;
      }
    }
  };
</script>

<style lang="scss" scoped></style>
